<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <script type="text/javascript" th:src="@{#{webjars.zxcvbn.js}}"></script>
    <script type="text/javascript" th:src="@{/js/passwordMeter.js}"></script>

    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body id="cas">
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" class="mdc-card p-4 m-auto w-lg-100">
        <script th:inline="javascript">
            /*<![CDATA[*/

            let policyPattern = /*[[${passwordPolicyPattern}]]*/;
            let passwordStrengthI18n = {
                0: /*[[#{screen.pm.password.strength.0}]]*/,
                1: /*[[#{screen.pm.password.strength.1}]]*/,
                2: /*[[#{screen.pm.password.strength.2}]]*/,
                3: /*[[#{screen.pm.password.strength.3}]]*/,
                4: /*[[#{screen.pm.password.strength.4}]]*/
            };

            /*]]>*/
        </script>

        <h2 th:utext="#{cas.screen.acct.title}"/>
        <p class="intro" th:utext="#{cas.screen.acct.intro.complete}"/>

        <form method="post" id="fm1">
            <div class="banner banner-danger my-2" th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
                <p th:each="message : ${flowRequestContext.messageContext.allMessages}"
                   th:utext="${message.text}">Message Text</p>
            </div>

            <div class="cas-field my-3 mdc-input-group">
                <div class="mdc-input-group-field mdc-input-group-field-append form-group">
                    <div class="d-flex caps-check ">
                        <label for="password" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon control-label">
                            <span class="mdc-notched-outline">
                                <span class="mdc-notched-outline__leading"></span>
                                <span class="mdc-notched-outline__notch">
                                    <span class="mdc-floating-label" th:utext="#{screen.pm.enterpsw}">Enter Password:</span>
                                </span>
                                <span class="mdc-notched-outline__trailing"></span>
                            </span>
                            <input class="mdc-text-field__input pwd form-control"
                                   autocapitalize="none"
                                   spellcheck="false"
                                   th:attr="pattern=${passwordPolicyPattern}"
                                   type="password"
                                   name="password"
                                   id="password"
                                   autocomplete="off" required/>
                            <div class="mdc-text-field-helper-line">
                                <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
                                    th:utext="#{cas.screen.acct.error.invalid-value}" aria-hidden="true" />
                            </div>
                        </label>
                        <button class="reveal-password align-self-end mdc-button mdc-button--unelevated mdc-input-group-append mdc-icon-button btn btn-primary"
                                tabindex="-1"
                                type="button">
                            <i class="mdi mdi-eye reveal-password-icon fas fa-eye"></i>
                            <span class="visually-hidden">Toggle Password</span>
                        </button>
                    </div>
                    
                    <div class="mdc-text-field-helper-line caps-warn">
                        <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                            <span th:utext="#{screen.capslock.on}"/>
                        </p>
                    </div>
                </div>
            </div>

            <div class="cas-field form-group my-3">
                <div class="caps-check">
                    <label for="confirmedPassword" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon control-label">
                        <span class="mdc-notched-outline">
                            <span class="mdc-notched-outline__leading"></span>
                            <span class="mdc-notched-outline__notch">
                                <span class="mdc-floating-label" th:utext="#{screen.pm.confirmpsw}">Confirm Password:</span>
                            </span>
                            <span class="mdc-notched-outline__trailing"></span>
                        </span>
                        <input class="mdc-text-field__input pwd form-control"
                               type="password"
                               autocapitalize="none"
                               spellcheck="false"
                               th:attr="pattern=${passwordPolicyPattern}"
                               name="confirmedPassword"
                               id="confirmedPassword"
                               autocomplete="off" required/>
                    </label>
                    <div class="mdc-text-field-helper-line">
                        <div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
                             th:utext="#{cas.screen.acct.error.invalid-value}"
                             aria-hidden="true"/>
                    </div>
                    <i class="mdi mdi-alert mdc-text-field__icon text-danger caps-warn"></i>
                </div>
            </div>

            <section th:if="${accountRegistrationSecurityQuestionsCount gt 0}">
                <div class="cas-field my-3 form-control" th:each="count : ${#numbers.sequence(1, accountRegistrationSecurityQuestionsCount)}">
                    <div class="d-flex">
                        <label class="mdc-text-field mdc-text-field--outlined control-label">
                            <span class="mdc-notched-outline">
                                <span class="mdc-notched-outline__leading"></span>
                                <span class="mdc-notched-outline__notch">
                                    <span class="mdc-floating-label" th:utext="#{${'screen.acct.label.security.question.' + count}}"></span>
                                </span>
                                <span class="mdc-notched-outline__trailing"></span>
                            </span>
                            <input class="mdc-text-field__input form-control"
                                   th:id="${'securityquestion' + count}"
                                   th:name="${'securityquestion' + count}"
                                   size="50"
                                   type="text"
                                   autocapitalize="none"
                                   spellcheck="false"/>
                            
                        </label>
                    </div>

                    <div class="caps-check my-3 form-group">
                        <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon control-label">
                            <input class="mdc-text-field__input pwd form-control"
                                   autocapitalize="none"
                                   spellcheck="false"
                                   type="password"
                                   th:id="${'securityanswer' + count}"
                                   th:name="${'securityanswer' + count}"
                                   autocomplete="off" required/>

                            <span class="mdc-notched-outline">
                                    <span class="mdc-notched-outline__leading"></span>
                                    <span class="mdc-notched-outline__notch">
                                      <span class="mdc-floating-label" th:utext="#{screen.acct.label.security.answer}"></span>
                                    </span>
                                    <span class="mdc-notched-outline__trailing"></span>
                                </span>
                        </label>
                        <i class="mdi mdi-alert mdc-text-field__icon text-danger caps-warn"></i>
                    </div>
                </div>
            </section>

            <div class="cas-field form-group my-3 d-flex flex-column">
                <div class="d-flex align-items-center">
                    <span th:text="#{screen.pm.password.strength}">Strength:</span>&nbsp;
                    <span id="password-strength-icon" class="mdi" aria-hidden="true"></span>
                </div>
                <div id="strengthProgressBar" role="progressbar" class="d-none progress">
                    <div id="progress-strength-indicator" class="progress-bar progress-bar-indicator text-center"></div>
                    <div class="mdc-linear-progress">
                        <div class="mdc-linear-progress__buffering-dots"></div>
                        <div class="mdc-linear-progress__buffer"></div>
                        <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar" style="transform: scaleX(0);">
                            <span class="mdc-linear-progress__bar-inner"></span>
                        </div>
                        <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
                            <span class="mdc-linear-progress__bar-inner"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cas-field form-group my-3 text-warning" id="password-strength-msg" style="display: none;">
                <div class="suggestions banner banner-warning alert alert-warning p-2 mb-2 d-flex align-items-center" role="alert">
                    <span class="mdi mdi-information fas fa-info-circle" aria-hidden="true"></span>&nbsp;
                    <p class="m-0">
                        <span id="password-strength-warning"></span>&nbsp;
                        <span id="password-strength-suggestions"></span>
                    </p>
                </div>
            </div>
            <div class="cas-field form-group my-3 text-danger" id="password-strength-notes">
                <div id="password-policy-violation-msg" class="banner banner-danger alert alert-danger p-2" role="alert"
                    style="display: none;">
                    <span class="mdi mdi-alert fas fa-exclamation-triangle" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.policyViolation}">Password does not match the password policy
                        requirement.</strong>
                </div>
                <div id="password-confirm-mismatch-msg" class="banner banner-danger alert alert-danger p-2" role="alert"
                    style="display: none;">
                    <span class="mdi mdi-alert fas fa-exclamation-triangle" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.confirmMismatch}">Passwords do not match.</strong>
                </div>
            </div>

            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="submit"/>
            <div class="form-actions d-flex justify-content-center">
                <button class="mdc-button mdc-button--raised me-2 btn btn-primary"
                        name="submit"
                        th:value="#{cas.screen.acct.button.submit}"
                        id="submit"
                        accesskey="s">
                    <span class="mdc-button__label" th:value="#{cas.screen.acct.button.submit}">Submit</span>
                </button>
                &nbsp;
                <a class="mdc-button mdc-button--outlined btn btn-secondary" th:href="@{/login}">
                    <span class="mdc-button__label" th:text="#{cas.screen.acct.button.cancel}">CANCEL</span>
                </a>
            </div>
        </form>
    </div>
</main>
</body>
</html>
